<template xmlns:https="http://www.w3.org/1999/xhtml" xmlns:https="http://www.w3.org/1999/xhtml"
          xmlns:https="http://www.w3.org/1999/xhtml" xmlns:https="http://www.w3.org/1999/xhtml"
          xmlns:https="http://www.w3.org/1999/xhtml" xmlns:https="http://www.w3.org/1999/xhtml"
          xmlns:https="http://www.w3.org/1999/xhtml" xmlns:https="http://www.w3.org/1999/xhtml">
  <div class="orderfrom">
    <h1>订单详情</h1>
    <hr>
    <span>{{this.orders.type=='0'?'实时代叫车':this.orders.type=='1'?'实时自叫车':this.orders.type=='2'?'实时货运':this.orders.type=='3'?'预约代叫车':this.orders.type=='4'?'预约自叫车':this.orders.type=='5'?'预约货运':''}}</span>
    <span>({{this.orders.orderstatus=='0'?'已取消':this.orders.orderstatus=='1'?'已完成':this.orders.orderstatus=='2'?'进行中':this.orders.orderstatus=='3'?'待接单':'路程中'}})</span>
    <span class="span1" >{{this.orders.starting}}<span>—————————{{this.orders.mileage}}km—————————></span>{{this.orders.getpoint}}</span>
    <div style="display: flex">
      <div style="margin-top: 10px">
        <div>
          <span>搜索地址：</span>
          <el-autocomplete
              v-model="this.orders.getpoint"
              style="width: 300px"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入内容"
              @select="handleSelect"
          ></el-autocomplete>
          <span style="margin-left: 10px">
          <span>经度：{{form.lng }}</span>
          <span style="margin-left: 10px">纬度：{{form.lat }}</span>
          <span>地址：{{this.orders.starting}}</span>
        </span>
          <el-button style="margin-left: 10px" type="danger" size="small" @click="reset">清空</el-button>
        </div>
        <div id="container" class="container"></div>
        <div id="panel"></div>
      </div>
    </div>
    <div class="div1">
      订单发出：{{this.$route.query.ordersDetail.paymaketime}}<br>
      订单编号：{{this.$route.query.ordersDetail.oid}}<br>
      用户：{{this.$route.query.ordersDetail.real_name}}|{{this.$route.query.ordersDetail.phone}}<br>
      乘客：{{this.$route.query.ordersDetail.real_name}}|{{this.orders.phone}}<br>
      司机接单：{{this.$route.query.ordersDetail.acceptime}}<br>
      出发等待时间：{{this.$route.query.ordersDetail.waittime}}<br>
      接到乘客：{{this.$route.query.ordersDetail.passengertime}}<br>
      到达目的地时间：{{this.$route.query.ordersDetail.payarrivetime}}<br>
      订单里程：{{this.$route.query.ordersDetailmileage}}<br>
      订单耗时：{{this.$route.query.ordersDetail.payconsuming}}<br>
      订单费用：{{this.$route.query.ordersDetail.pricesum}}<br>
      订单支付：{{this.$route.query.ordersDetail.paytime}}<br>
      支付方式：{{this.$route.query.ordersDetail.paymentmethod===0 ?'微信':this.$route.query.ordersDetail.paymentmethod===1 ?'支付宝':'其他'}}<br>
    </div>
  </div>

</template>


<script>
import AMapLoader from "@amap/amap-jsapi-loader"

window._AMapSecurityConfig = {
  // 安全密钥
  securityJsCode: "0e4944a665e6470f76f5316cafa840cd",
};
export default {
  name: "HomeView",
  data() {
    return {
      from:{
        lng:"",
        lat:""
      },
      mileage:null,
      orders: {},//第三处
      // 地图实例
      map: null,
      toolbar: null,
      // 标记点
      marker: "",
      // 地址逆解析
      geoCoder: null,
      // 搜索提示
      AutoComplete: null,
      //缩放控件
      ToolBar: null,
      //地图放大镜
      HawkEye: null,
      // 搜索关键字
      keywords: "",
      // 位置信息
      form: {
        lng: "116.208741",
        lat: "40.136902",
        address: '',
      },
      // 搜索节流阀
      loading: false,
      // 搜索提示信息
      options: [],
      trackPositions: [],
      //精准定位
      Geolocation() {
      },

      driverTime: null,
      driverLong: null,
      startaddress: "",
      endaddress: "",
      // 开始的经纬度
      startLatitudeAndLongitude: "116.379028, 39.865042",
      // 结束的经纬度
      endLatitudeAndLongitude: "116.427281, 39.803719",


    };
  },
  created() {
  },
  methods: {
    async getMapApi() {

      if (this.trackPositions && this.trackPositions.length) {
        // 通过 高德 API获取 all 所有 路线 经纬度
        //构造路线导航类
        var driving = new AMap.Driving({
          map: this.map,
          panel: "panel"
        });

        var lngsrt = this.trackPositions[0];
        // 根据起终点经纬度规划驾车导航路线
        driving.search(
            new AMap.LngLat(this.trackPositions[0][0], this.trackPositions[0][1]),
            // console.log(this.trackPositions[0][0]),
            // console.log(this.trackPositions[0][1]),
            new AMap.LngLat(this.trackPositions[1][0], this.trackPositions[1][1]),
            // console.log(this.trackPositions[1][0]),
            // console.log(this.trackPositions[1][1]),
            function (status, result) {
              // result 即是对应的驾车导航信息，相关数据结构文档请参考
              console.log(result)
              // https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
              if (status === 'complete') {
                // this.map.setFitView();
                console.log('绘制驾车路线完成')
              } else {
                console.log('获取驾车数据失败：' + result)
              }
            })
      }
    },

    reset() {
      this.keywords = '';
      this.form = {
        lng: "116.208741",
        lat: "40.136902",
        address: '',
      }
      // 清除点
      this.removeMarker();
      // 标记点
      this.setMapMarker();
    },


    initMap() {
      let that = this;
      // that.trackPositions.push([this.form.lng, this.form.lat]);
      AMapLoader.load({
        // 你申请的Key
        key: "ada8670ecd370d830ce2f1f71397ee05",
        version: "2.0",
        // 需要用到的插件
        plugins: ["AMap.Geocoder",
          "AMap.AutoComplete", "" +
          "AMap.ToolBar",
          "AMap.HawkEye",
          "AMap.Geolocation",
          "AMap.Driving"
        ],
      }).then((AMap) => {

        that.map = new AMap.Map("container", {
          viewMode: "3D", //是否为3D地图模式
          zoom: 23, //初始化地图级别
          center: [that.form.lng, that.form.lat], //初始化地图中心点位置
        });
        //地址逆解析插件
        that.geoCoder = new AMap.Geocoder({
          city: "010", //城市设为北京，默认：“全国”
          radius: 1000, //范围，默认：500
        });
        // 搜索提示插件
        that.AutoComplete = new AMap.AutoComplete({city: "全国"});
        that.ToolBar = new AMap.ToolBar({
          position: {
            bottom: '210px',
            right: '35px'
          }
        });
        that.HawkEye = new AMap.HawkEye({
          position: {
            bottom: '110px',
            left: '35px'
          }
        });
        that.Geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认：true
          timeout: 10000, // 设置定位超时时间，默认：无穷大
          offset: [10, 20],  // 定位按钮的停靠位置的偏移量
          zoomToAccuracy: true,  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          position: 'RB' //  定位按钮的排放位置,  RB表示右下

        });


        that.map.addControl(that.ToolBar);
        that.map.addControl(that.HawkEye);
        that.map.addControl(that.Geolocation);

        // this.map.addControl(toolbar);
        // 清除点
        that.removeMarker();
        // 标记点
        that.setMapMarker();
        //点击获取经纬度;
        that.map.on("click", (e) => {
          // 获取经纬度
          that.form.lng = e.lnglat.lng;
          that.form.lat = e.lnglat.lat;
          // 清除点
          that.removeMarker();
          // 标记点
          that.setMapMarker();


        });
      })
          .catch((err) => {
            // 错误
          });
    },
    // 标记点
    setMapMarker() {
      // 自动适应显示想显示的范围区域
      this.map.setFitView();
      this.marker = new AMap.Marker({
        map: this.map,
        position: [this.form.lng, this.form.lat],
      });
      // 逆解析地址
      this.toGeoCoder();
      this.map.setFitView();
      this.map.add(this.marker);
    },
    // 清除点
    removeMarker() {
      if (this.marker) {
        this.map.remove(this.marker);
      }
    },
    // 逆解析地址
    toGeoCoder() {
      let lnglat = [this.form.lng, this.form.lat];
      this.geoCoder.getAddress(lnglat, (status, result) => {
        if (status === "complete") {
          this.form.address = result.regeocode.formattedAddress;
          console.log(this.form.address)
        } else {
          this.form.address = '';
        }
      });
    },
    querySearchAsync(queryString, cb) {
      console.log(queryString)
      if (queryString) {
        this.AutoComplete.search(queryString, (status, result) => {//第二处
          if (status === 'complete') {
            this.options = result.tips;
            for (let i = 0; i < this.options.length; i++) {
              this.options[i].value = this.options[i].name;
            }
          } else {
            this.options = [];
          }
          cb(this.options);
        });
      } else {
        this.options = [];
        cb(this.options);
      }
    },
    handleSelect(val) {
      // 清空时不执行后面代码
      if (!val) {
        return;
      }
      this.trackPositions = [];
      this.trackPositions.push([this.form.lng, this.form.lat]);
      this.form = {
        lng: val.location.lng,
        lat: val.location.lat,
      };
      this.trackPositions.push([this.form.lng, this.form.lat])
      // 清除点
      this.removeMarker();
      // 标记点
      this.setMapMarker();
      // 绘画地图
      this.getMapApi(this.trackPositions);
    },
  },
  mounted() {
    this.initMap();
  },
  unmounted() {
    this.map.destroy();
    // console.log(this.map.destroy())
  },

};
</script>

<style>
.div1{
  margin-top: -390px;
  line-height: 30px;
  margin-left: 420px;
}
.container {

  width: 400px;
  height: 400px;
}
.orderfrom{
  margin-left: 60px;
}
.span1{
  margin-left: 130px;
}
</style>
